<script setup lang="ts">
import { ref } from "vue";
import {
  useMessage,
  NButton,
  NImage,
  NSelect,
  NSlider,
  NUpload,
  NInput,
} from "naive-ui";
import { homeStore, useAppStore } from "@/store";
import { SvgIcon } from "@/components/common";
import config from "./draw.json";
import axios from "@/utils/request/axios";
const ms = useMessage();
const fsRef = ref();
var tarinInfo = ref("生成最终视频");
const appStore = useAppStore();
const st = ref({ status: "", isGo: false, dimensions: "SQUARE" });
const base64Array = ref<string[]>([]);

var params = ref({
  FaceVideoId: window.FaceVideoId,
  PPTFileId: window.pptFileId,
  Speed: window.speed || 1,
  Position: 2,
});
var loading = ref(false);
const vf = [
  {
    s: "width: 20px; height: 20px;position:absolute;top:0;left:0",
    t: "position:absolute;top:0;left:0",
    label: "左上",
  },
  {
    s: "width: 20px; height: 20px;position:absolute;bottom:0;left:0",
    t: "position:absolute;bottom:0;left:0",
    label: "左下",
  },
  {
    s: "width: 20px;height: 20px;position:absolute;top:0;right:0",
    t: "position:absolute;top:0;left:0",
    label: "右上",
  },
  {
    s: "width: 20px; height: 20px;position:absolute;bottom:0;right:0",
    t: "position:absolute;top:0;left:0",
    label: "右下",
  },
];
const f = ref({ sourceBase64: "", targetBase64: "", bili: 0 });
let timer;
function pollTrainInfo(finalvideoid) {
  axios
    .get(
      `/api/final/check?finalvideoid=${finalvideoid}`,

      {}
    )
    .then((response) => {
      tarinInfo.value = response.data.data.Info;
      if (response.data.data.Info == "done") {
        loading.value = false;
        ms.success("生成成功！");
      } else {
        loading.value = true;
      }
      //   appStore.setFinalVideoUrl(
      //     "/src/views/chat/video/tts_video/video_20240227024436.mp4"
      //   );
      if (response.data.data.Info == "done") {
        appStore.setFinalVideoUrl(
          "/src/views/chat" + response.data.data.FilePath
        );
        clearInterval(timer);
      }
    })
    .catch((error) => {
      console.error("上传失败", error);
    });
}
function changeindex(item, index: number) {
  f.value.bili = index;
  params.value.Position = Number(index);
  appStore.setIndex(index);
}

const create = () => {
  loading.value = true;
  console.log(window.pptFileId);

  if (window.pptFileId) {
    let url = "/api/final/merge";
    axios
      .post(url, params.value, {})
      .then((response) => {
        if (response.data.status == "success") {
          timer = window.setInterval(
            () => pollTrainInfo(response.data.data.FileId),
            1000
          );
          //         appStore.setFinalVideoUrl(
          //     "/src/views/chat/video/tts_video/video_20240227024436.mp4"
          //   );
        }
        // ms.success("生成成功！");
      })
      .catch((error) => {
        console.error("上传失败", error);
      });
  }
};
</script>
<template>
  <input
    type="file"
    @change="selectFile"
    ref="fsRef"
    style="display: none"
    accept="image/jpeg, image/jpg, image/png, image/gif"
  />

  <div class="flex justify-around items-center">
    <div style="width: 100%">
      <section class="mb-4">
        <h2 style="padding-bottom: 10px; font-weight: 600">选择人脸位置</h2>
        <div class="flex items-center justify-between space-x-1">
          <template v-for="(item, index) in vf" :key="index">
            <section
              class="aspect-item flex-1 rounded border-2 dark:border-neutral-700 cursor-pointer"
              style="
                position: relative;
                height: 60px;
                line-height: 60px;
                text-align: center;
              "
              :class="{ active: index == f.bili }"
              @click="changeindex(item, index)"
            >
              <div class="aspect-box-wrapper">
                <div
                  class="aspect-box rounded border-2 dark:border-neutral-700"
                  :style="item.s"
                ></div>
                {{ item.label }}
              </div>
            </section>
          </template>
        </div>
      </section>

      <div class="mb-4">
        <div class="flex" style="margin-top: 20px">
          <n-button
            type="primary"
            :loading="loading"
            :block="true"
            :disabled="!(params.PPTFileId && params.FaceVideoId) || loading"
            @click="create()"
          >
            <SvgIcon icon="mingcute:send-plane-fill" />
            {{ tarinInfo }}
          </n-button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.myblend {
  --my-blend-img-size: 80px;
}
</style>